<template>
  <CommonCard title="累计用户数" :value="usersTotal|numberFormat" class="total-users">
      <template #chart>
          <v-chart :option="getOption()"></v-chart>
      </template>
      <template #bottom>
          <div class="total-users-bottom">
            <div>日同比</div>
            <div class="number">{{userGrowthLastDay}}%</div>
            <div :class="userGrowthLastDay > 0 ? 'increment':'decremnent'"></div>
             <div class="right">月同比</div>
            <div class="number">{{userGrowthLastMonth}}%</div>
            <div :class="userGrowthLastMonth > 0 ? 'increment':'decremnent'"></div>
          </div>
      </template>
    </CommonCard>
</template>
<script>
//引入vuex辅助函数
import {mapState} from 'vuex'
export default {
    
    /** "//4": "累计用户数",
        "usersTotal": 1177965,
        "usersLastDay": 1000000,
        "usersLastMonth": 800000,
        "userGrowthLastDay": "17.70",
        "userGrowthLastMonth": "47.12",
  */
  name: 'TotalUsers',
  computed:{
    ...mapState({
        usersTotal:(state)=> state.data.reportData.usersTotal,
        usersLastDay:(state)=>state.data.reportData.usersLastDay,
        usersLastMonth:(state)=>state.data.reportData.usersLastMonth,
        userGrowthLastDay:(state)=>state.data.reportData.userGrowthLastDay,
        userGrowthLastMonth:(state)=>state.data.reportData.userGrowthLastMonth,
    })
  },
  methods:{
      //初始化一个echart对象
      getOption(){
          return{
              //x轴
              xAxis:{
                  show:false,//隐藏轴线
                  type:'value',//设置x轴为数值轴
                  min: 0,
                  max:this.usersTotal,//最大刻度值
              },
              //y轴
              yAxis:{
                  show:false,//隐藏轴线
                  type:'category',//指定y轴为类目轴
              },
              //系列数据
              series:{
                  name:'月增长量',
                  type:'bar',
                  data:[this.usersTotal - this.usersLastMonth],
                  barWidth:15,//水平显示的柱状图的高度
                  showBackground:true,//显示树状图背景颜色,默认是false  
                  label:{
                      show:true,//在柱状图上显示文本 默认是false
                      formatter:'|', //在柱状图上显示竖线 
                      position:'right' //在柱状图右侧显示竖线 默认是在中间显示
                  }
              },
              //提示
              tooltip:{
                  //指定提示的数据
                  formatter(params){
                    //   console.log(params)//打印一下parmas的内容
                      const{seriesName,marker,value}= params
                      return`${seriesName}<br> ${marker} ${value}`
                  }
              },
              //网格
              grid:{
                  left: 0,
                  top: 0,
                  right:0,
                  bottom:0,
              },
              color:'#9acd32'
          }
      }
  }
}
</script>

<style lang="scss"scoped>
.total-users{
    .total-users-bottom{
        display:flex;
        .right{
            margin-left: 10px;
        }
    }
}
</style>